<template>
  <a-modal 
    v-model="visible" 
    title="编辑模板" 
    :dialog-style="{ top: '10px' }"
    :footer="null" 
    :bodyStyle="{background: '#ededed'}"
    width="90%"
    class="drawerStyle"
    >
    <div class="content flex">
      <div class="con-left">
        <a-tabs 
        default-active-key="1" 
        @change="callback"
        :tabBarGutter ="0"
        :tab-bar-style="{
            backgroundColor:'#f8f8f8',
            height: '44px',
            lineHeight: '44px',
            paddingLeft: '10px',
            paddingRight: '10px',
          }">
          <a-tab-pane key="1" tab="图层组件">
            <layer-component-list></layer-component-list>
          </a-tab-pane>
          <a-tab-pane key="2" tab="图层顺序">
            <layer-order></layer-order>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="canvasBox">
      </div>
      <div class="con-right">
        <div class="header">图层编辑</div>
        <layer-edit></layer-edit>
      </div>
    </div>
  </a-modal>
</template>

<script>
import layerComponentList from './layout/layer-component-list.vue'
import layerOrder from './layout/layer-order.vue'
import layerEdit from './layout/layer-edit.vue'
export default {
  components: {layerComponentList, layerOrder, layerEdit},
  data () {
    return {
      visible: false,
    }
  },
  created () {
  },
  methods: {
    open () {
      this.visible = true
    },
    callback (key) {
      console.log(key)
    },
    handleOk () {
      console.log('aaa')
      this.visible = false
    },
  },
}
</script>

<style lang='scss' scoped>
.drawerStyle :global(.ant-modal-wrap .ant-modal .ant-modal-content .ant-modal-body) {
  padding: 10px 0 0 !important;
}
.content{justify-content: space-between; align-items: center; height: 85vh; min-height: 800px;}
.con-left{width: 200px; height: 100%; overflow: hidden; background: #fff; box-shadow: 3px 0 10px #bdbbbb;border-radius: 0 5px 0 0;}
.canvasBox{width: 600px; height: 600px; overflow: hidden; background: #fff;}
.con-right{width: 300px; height: 100%; overflow: hidden; background: #fff; box-shadow: -3px 0 10px #bdbbbb;border-radius: 5px 0 0 0;}
.header{
  background-color:#f8f8f8;
  border-radius: 0 4px;
  height: 44px;
  line-height: 44px;
  border:1px solid #eee;
  text-align: center
}
</style>